<template>
  <div class="home">
    <div class="posSlot">
      <slot name="inpBefore"></slot>
    </div>
    <!-- 对 el-input 值进行拦截，相当于对 v-model 进行拆解，分别对 :value 和 @input 进行处理 -->
    <el-input
      type="text"
      :value="text"
      @input="formInput"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template v-for="(slot, slotName) in $slots" :slot="slotName">
        <slot :name="slotName"></slot>
      </template>
      <template v-for="(slot, slotName) in $slots" #[slotName]>
        <slot :name="slotName"></slot>
      </template>
    </el-input>
    <div class="posSlot">
      <slot name="inpAfter"></slot>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "proxyInput",
  inheritAttrs: false,
  model: {
    prop: "text", // 对应 props 以及 :value 的 text
    event: "valueChange",
  },
  props: {
    text: String,
    needProxy: {
      type: Boolean,
      default: true,
    },
    tipText: {
      type: String,
      default: "确认更改内容吗?",
    },
  },
  data() {
    return {};
  },
  methods: {
    formInput(e) {
      console.log(e);
      if (this.needProxy) {
        // 将双向绑定机制修改
        this.$confirm(this.tipText, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$emit("valueChange", e);
            this.$message({
              type: "success",
              message: "已更改内容！",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消更改！",
            });
          });
      } else {
        this.$emit("valueChange", e);
      }
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  display: flex;
  align-items: center;
  .posSlot {
    text-align: center;
    padding: 0 20px;
    white-space: nowrap;
  }
}
</style>
